<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <link rel="stylesheet" href="../../lib/css/bootstrap.min.css">
  <link rel="stylesheet" href="../../lib/css/swiper.min.css">
  <link rel="stylesheet" href="../../lib/css/bootstrap-table.css">
  <link rel="stylesheet" href="../../css/admin.css">
  <script src="../../lib/js/jquery.min.js"></script>
  <script src="../../lib/js/bootstrap.min.js"></script>
  <script src="../../lib/js/swiper.min.js"></script>
  <script src="../../lib/js/bootstrap-table.js"></script>
  <title>Title</title>
</head>
<body>
<div class="admin-item">
  <div class="container">
      <h2>轮播图管理
        <span class="btn btn-info pull-right" data-toggle="modal" data-target="#exampleModal" data-type="add">添加</span>
      </h2>
      <div class="table-responsive table-item">
        <table class="table">
          <tr>
            <th>启用</th>
            <th>序号</th>
            <th>标题</th>
            <th>描述</th>
            <th>操作</th>
          </tr>
          <tr>
            <td><input type="checkbox"></td>
            <td class="num-item">1</td>
            <td class="tit-item">banner1</td>
            <td class="info-item">banner.html</td>
            <td>
              <span class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-type="edit">编辑</span>
              <span class="btn btn-default delete-btn" data-toggle="modal" data-target="#delete-banner">删除</span>
            </td>
          </tr>
        </table>
      </div>
      <h2>展示</h2>
      <div class="row">
        <div class="swiper-container">
          <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="https://10068482.s21i.faiusr.com/2/ABUIABACGAAg7L_XvAUozID0iwcwgA846gU.jpg" alt="..."></div>
            <div class="swiper-slide"><img src="https://10068482.s21i.faiusr.com/2/ABUIABACGAAg7L_XvAUozID0iwcwgA846gU.jpg" alt="..." style="opacity: .8"></div>
          </div>
          <!-- 如果需要分页器 -->
          <div class="swiper-pagination"></div>
          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev"></div>
          <div class="swiper-button-next"></div>
          <!-- 如果需要滚动条 -->
          <div class="swiper-scrollbar"></div>
        </div>
      </div>
    <table id="table"></table>
  </div>
  <!-- 弹窗 -->
  <div class="modal fade" id="exampleModal" tabindex="-1">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-name" class="control-label">标题</label>
              <input type="text" class="form-control tit-con">
            </div>
            <div class="form-group">
              <label for="message-text" class="control-label">描述</label>
              <textarea class="form-control info-con"></textarea>
            </div>
            <div class="form-group">
              <label for="exampleInputFile">图片上传</label>
              <input type="file">
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
          <button type="button" class="btn btn-primary save-btn">保存</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除 -->
  <!-- <div class="modal fade" id="delete-banner" tabindex="-1">
    <div class="modal-dialog modal-sm" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
          是否确定删除
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary delete">确定</button>
        </div>
      </div>
    </div>
  </div> -->
</div>
<script>
$(function () {
  'use strict';
  $('#exampleModal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var modal = $(this)
    var type = button.data('type');
    var parent = button.parents("tr");
    var editNum = parent.find(".num-item");
    var editTit = parent.find(".tit-item");
    var editInfo = parent.find(".info-item");
    var save = modal.find(".save-btn")
    if (type === 'add') {
      modal.find('.modal-title').text('添加轮播图');
      modal.find('.tit-con').val('');
      modal.find('.info-con').val('');
    }else if(type === 'edit'){
      modal.find('.modal-title').text('编辑轮播图'+editNum.text());
      modal.find('.tit-con').val(editTit.text());
      modal.find('.info-con').val(editInfo.text());
    }
    save.off().on("click", function () {
      var num = $(".table-item tr").length;
      var tit = modal.find(".tit-con").val()
      var info = modal.find(".info-con").val()
      if (type === 'add') {
        var tpl = '<tr> <td><input type="checkbox"></td> <td class="num-item">'+num+'</td> <td class="tit-item">'+tit+'</td> <td class="info-item">'+info+'</td> <td> <span class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-type="edit">编辑</span> <span class="btn btn-default delete-btn" data-toggle="modal" data-target="#delete-banner">删除</span> </td> </tr>'
        $(".table-item table").append(tpl)
      }else if(type === 'edit'){
        editTit.text(tit)
        editInfo.text(info)
      }
      modal.modal('hide');
    })
  })
  // 删除
  /* $('#delete-banner').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var tit = button.parents("tr").find(".tit-item");
    var modal = $(this)
    modal.find('.modal-title').text(tit.text());
    modal.find('.delete').on("click", function () {
      button.parents("tr").remove();
      $('#delete-banner').modal('hide')
    })
  }) */
  $(".table-item").on("click", ".delete-btn", function () {
    if(confirm("是否确定删除")){
      $(this).parents("tr").remove();
    }
  })
  var swiper = new Swiper('.swiper-container', {
    loop: true,
    autoplay: true,
    pagination: {
      el: '.swiper-pagination',
    },
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });
  //
  $('#table').bootstrapTable({
    pagination: true,
    columns: [{
      field: 'id',
      title: 'Item ID'
    }, {
      field: 'name',
      title: 'Item Name'
    }, {
      field: 'price',
      title: 'Item Price'
    }],
    data: [{
      id: 1,
      name: 'Item 1',
      price: '$1'
    }, {
      id: 2,
      name: 'Item 2',
      price: '$2'
    }]
  });
})
</script>
</body>
</html>